<!--
帖子
 -->
<template>
  <div style="margin-bottom:30px">
    <noMore v-if="listData.length == 0"></noMore>
    <div class="invitationBox" v-for="(item, index) in listData" :key="index">
      <div class="flexBox">
        <div class="leftImg">
          <el-image style="width: 123px; height: 123px" :src="item.articleimg" fit="cover"></el-image>
        </div>
        <div>
          <div class="invitationBoxTitle" @click="toDetails(item)">{{ item.articlename }}</div>
          <div class="invitationBoxSubTitle">{{ item.textReplace }}</div>
          <div class="invitationBoxBottom">
            <div class="invitationBoxBottomItem">{{ item.reading }} 次阅读</div>
            <div class="invitationBoxBottomItem">{{ item.reply }} 回复</div>
            <div class="invitationBoxBottomItem">{{ item.praiseSize }} 赞</div>
            <div class="invitationBoxBottomItem2" @click="editArticle(item)">编辑</div>
            <div class="invitationBoxBottomItem2" @click="delectArticle(item,index)">删除</div>
            <div class="audit" v-if="!item.audit">未审核通过</div>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
    </div>
    <el-pagination
      background
      @current-change="handleCurrentChange"
      :page-size="limitSize"
      layout="prev, pager, next, jumper"
      :total="articleSize"
    ></el-pagination>
  </div>
</template>

<script>
import { get_article } from "../../../api/article";
import { post_delect_article } from "@/api/deleteTheInterface";
import noMore from "../../../components/noMore";
import { post_onlineArticleDraft } from "../../../api/articleOnlineDraft";
export default {
  name: "myInvitation",
  components: {
    noMore
  },
  data() {
    return {
      listData: [],
      skipSize: 0, //开始位置
      articleSize: 0, //总文章
      limitSize: 10,
      sortSelect: {
        sort: {
          release_time: -1
        }
      } //排序
    };
  },
  watch: {
    async $route(newRouter) {
      //监听路由是否变化
      if (newRouter.path == "/personalCenter") {
        this.getArticle(this.sortSelect);
      }
    }
  },
  async created() {
    this.getArticle(this.sortSelect);
  },
  methods: {
    async getArticle(query) {
      let Data = await get_article({
        query: {
          aeticletype: "珠海港圈",
          userid: this.$store.getters.userInfo._id
        },
        ...query,
        skip: this.skipSize,
        limit: this.limitSize,
        count: true
      });
      console.log("listData个人页面珠海文章", Data);
      this.listData = Data.data;
      this.articleSize = Data.countnum;
    },
    toDetails(item) {
      this.$router.push({
        path: "/zhuhaiPortCircleDetails",
        query: {
          article_id: item._id
        }
      });
    },
    handleCurrentChange(val) {
      this.skipSize = (val - 1) * this.limitSize;
      console.log(`当前页: ${val}`);
      this.getArticle(this.sortSelect);
    },
    //编辑文章
    async editArticle(item) {
      console.log("``````编辑文章``````");
      console.log("文章：", item);
      let onlineDraft = {
        articleId: item._id, //文章id
        articlename: item.articlename, //文章标题
        articleimg: item.articleimg, //文章主图
        content: item.content, //富文本内容
        userid: item.userid, //用户id
        shareArticle: item.shareArticle
      };
      console.log(onlineDraft);
      let postAfter = await post_onlineArticleDraft(onlineDraft);
      console.log(postAfter);
      this.$router.push({
        path: "/onlineArticleEditing",
        query: {
          _id: postAfter.data
        }
      });
    },
    //删除文章
    async delectArticle(item, index) {
      this.$confirm("此操作将永久删除该文章, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          console.log("``````删除文章``````");
          console.log("文章：", item);
          await post_delect_article(item);
          this.listData.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.invitationBox {
  .flexBox {
    display: flex;
    .leftImg {
      margin-right: 20px;
    }
    .invitationBoxTitle {
      font-size: 23px;
      font-weight: 600;
      color: #333;
      margin-bottom: 15px;
      // width: 850px;
      overflow: hidden;
      text-overflow: ellipsis; //超出部分以省略号显示
      // white-space: nowrap;
      display: -webkit-box;
      -webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
      -webkit-box-orient: vertical;
      cursor: pointer;
      &:hover {
        color: #1d2f70;
        text-decoration: underline;
      }
    }
    .invitationBoxSubTitle {
      min-height: 40px;
      color: #6c6c6c;
      font-size: 17px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2; /* 可以显示的行数，超出部分用...表示*/
      -webkit-box-orient: vertical;
    }
    .invitationBoxBottom {
      display: flex;
      margin-top: 14px;
      color: #b3b2b2;
      .invitationBoxBottomItem {
        margin-right: 18px;
        font-size: 14px;
      }
      .invitationBoxBottomItem2 {
        margin-right: 18px;
        font-size: 14px;
        color: dodgerblue;
        cursor: pointer;
        &:hover {
          text-decoration: underline;
        }
      }
      .audit {
        color: red;
        font-weight: 600;
      }
    }
  }
}
</style>
